<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>自定义组件-小懒猫</title>
	<meta name="keywords" content="关键字,关键字"/>
	<meta name="description" content="描述信息">
	<style>
		.pug-button{
			display: block;
			width: 100px;
			height: 50px;
			background: red;
		}
		.pug-button-login{
			background: gray;
		}
		.pug-button-reg{
			background: greenyellow;
		}
		.pug-button-msg{	
			background: green;
		}
	</style>
</head>
<body>
	<div id="app">
		<h1>{{title}}</h1>
		<Pug-Button type="login">登录</Pug-Button>
		<Pug-Button type="reg">注册</Pug-Button>
		<Pug-Button >消息</Pug-Button>
	</div>
	<script src="../js/vue-min.js"></script>
	<script setup>
		const app = Vue.createApp({
			data() {
				return {
					title : "学习自定义组件...."
				}
			}
		});
		//定义和注册
		app.component("pug-button",{
			data(){
				
			},
			props:{
				type:{
				    type:[String,Number],
				    default:"error"
				},
			},
			template : `<button :class="'pug-button pug-button-'+type"><slot/></button>`
		})
		app.mount("#app");
	</script>
</body>
</html>
